<template>
  <div class="invoice-detail">
    <form-view class="task-tab-container task-view-containner tab-container" :fields="fields" :value="value">
      <!-- 开票状态 -->
      <template slot="billingStatus" slot-scope="{ field }">
        <div class="form-view-row">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <span class="form-tag" :style="getBillingStatusColor(value.billingStatus)">
              {{ getBillingStatusStr(value.billingStatus) }}
            </span>
          </div>
        </div>
      </template>
    </form-view>
  </div>
</template>

<script>
export default {
  // 兼容内部有组件使用到inject报错
  provide: {
    initData: {},
  },
  props: {
    fields: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    getBillingStatusColor(value) {
      switch (value) {
        case 1:
          return 'background: #FFAE00';
        case 2:
          return 'background: #07C160';
        case 3:
          return 'background: #8C8C8C';
        default:
          return '';
      }
    },
    getBillingStatusStr(value) {
      switch (value) {
        case 1:
          return '待开票';
        case 2:
          return '已开票';
        case 3:
          return '已取消';
        default:
          return '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.invoice-detail {
  .tab-container {
    padding: 10px 0 100px;
  }

  .form-tag {
    display: block;
    width: 52px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #00c853;
    border-radius: 11px;
    font-size: 12px;
    color: #fff;
  }
}
</style>
